<template>
  <PageContainer title="用户统计">
    <div class="user-statistics">
      <!-- 统计卡片 -->
      <el-row :gutter="20" class="stats-cards">
        <el-col :span="6">
          <StatCard
            title="总用户数"
            :value="statistics.totalUsers"
            icon="User"
            color="primary"
            :trend="statistics.userGrowth"
          />
        </el-col>
        <el-col :span="6">
          <StatCard
            title="活跃用户"
            :value="statistics.activeUsers"
            icon="UserFilled"
            color="success"
            :trend="statistics.activeGrowth"
          />
        </el-col>
        <el-col :span="6">
          <StatCard
            title="新增用户"
            :value="statistics.newUsers"
            icon="Plus"
            color="warning"
            :trend="statistics.newGrowth"
          />
        </el-col>
        <el-col :span="6">
          <StatCard
            title="用户留存率"
            :value="`${statistics.retentionRate}%`"
            icon="TrendCharts"
            color="info"
            :trend="statistics.retentionTrend"
          />
        </el-col>
      </el-row>

      <!-- 图表区域 -->
      <el-row :gutter="20" class="charts-section">
        <el-col :span="12">
          <el-card title="用户增长趋势">
            <div ref="userTrendChart" style="height: 300px;"></div>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card title="用户活跃度分布">
            <div ref="userActivityChart" style="height: 300px;"></div>
          </el-card>
        </el-col>
      </el-row>

      <el-row :gutter="20" class="charts-section">
        <el-col :span="12">
          <el-card title="用户地区分布">
            <div ref="userRegionChart" style="height: 300px;"></div>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card title="用户年龄分布">
            <div ref="userAgeChart" style="height: 300px;"></div>
          </el-card>
        </el-col>
      </el-row>

      <!-- 详细统计表格 -->
      <el-card title="详细统计" class="detail-table">
        <el-table :data="detailData" stripe>
          <el-table-column prop="date" label="日期" width="120" />
          <el-table-column prop="newUsers" label="新增用户" width="100" />
          <el-table-column prop="activeUsers" label="活跃用户" width="100" />
          <el-table-column prop="totalUsers" label="总用户数" width="100" />
          <el-table-column prop="retentionRate" label="留存率" width="100">
            <template #default="{ row }">
              {{ row.retentionRate }}%
            </template>
          </el-table-column>
          <el-table-column prop="avgSessionTime" label="平均使用时长" width="120" />
          <el-table-column prop="disposalCount" label="投递次数" width="100" />
          <el-table-column prop="revenue" label="产生收益" width="100">
            <template #default="{ row }">
              ¥{{ row.revenue }}
            </template>
          </el-table-column>
        </el-table>
        
        <el-pagination
          v-model:current-page="pagination.page"
          v-model:page-size="pagination.size"
          :total="pagination.total"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-card>
    </div>
  </PageContainer>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, nextTick } from 'vue'
import * as echarts from 'echarts'
import PageContainer from '@/components/PageContainer.vue'
import StatCard from '@/components/StatCard.vue'

// 统计数据
const statistics = reactive({
  totalUsers: 15420,
  activeUsers: 8650,
  newUsers: 234,
  retentionRate: 68.5,
  userGrowth: 12.5,
  activeGrowth: 8.3,
  newGrowth: -2.1,
  retentionTrend: 3.2
})

// 图表引用
const userTrendChart = ref<HTMLElement>()
const userActivityChart = ref<HTMLElement>()
const userRegionChart = ref<HTMLElement>()
const userAgeChart = ref<HTMLElement>()

// 详细数据
const detailData = ref([
  {
    date: '2024-01-20',
    newUsers: 45,
    activeUsers: 1250,
    totalUsers: 15420,
    retentionRate: 68.5,
    avgSessionTime: '25分钟',
    disposalCount: 3420,
    revenue: 2580.50
  },
  {
    date: '2024-01-19',
    newUsers: 52,
    activeUsers: 1180,
    totalUsers: 15375,
    retentionRate: 67.8,
    avgSessionTime: '23分钟',
    disposalCount: 3180,
    revenue: 2340.20
  },
  {
    date: '2024-01-18',
    newUsers: 38,
    activeUsers: 1320,
    totalUsers: 15323,
    retentionRate: 69.2,
    avgSessionTime: '27分钟',
    disposalCount: 3650,
    revenue: 2720.80
  }
])

// 分页
const pagination = reactive({
  page: 1,
  size: 10,
  total: 100
})

// 初始化用户增长趋势图
const initUserTrendChart = () => {
  if (!userTrendChart.value) return
  
  const chart = echarts.init(userTrendChart.value)
  const option = {
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['新增用户', '活跃用户', '总用户数']
    },
    xAxis: {
      type: 'category',
      data: ['1月1日', '1月2日', '1月3日', '1月4日', '1月5日', '1月6日', '1月7日']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '新增用户',
        type: 'line',
        data: [45, 52, 38, 67, 43, 58, 49]
      },
      {
        name: '活跃用户',
        type: 'line',
        data: [1250, 1180, 1320, 1450, 1380, 1520, 1420]
      },
      {
        name: '总用户数',
        type: 'line',
        data: [15200, 15252, 15290, 15357, 15400, 15458, 15507]
      }
    ]
  }
  chart.setOption(option)
}

// 初始化用户活跃度分布图
const initUserActivityChart = () => {
  if (!userActivityChart.value) return
  
  const chart = echarts.init(userActivityChart.value)
  const option = {
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      left: 'left'
    },
    series: [
      {
        name: '活跃度',
        type: 'pie',
        radius: '50%',
        data: [
          { value: 3500, name: '高活跃' },
          { value: 2800, name: '中活跃' },
          { value: 2350, name: '低活跃' },
          { value: 6770, name: '不活跃' }
        ]
      }
    ]
  }
  chart.setOption(option)
}

// 初始化用户地区分布图
const initUserRegionChart = () => {
  if (!userRegionChart.value) return
  
  const chart = echarts.init(userRegionChart.value)
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    xAxis: {
      type: 'category',
      data: ['北京', '上海', '广州', '深圳', '杭州', '成都', '武汉']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '用户数',
        type: 'bar',
        data: [2340, 1890, 1650, 1420, 980, 850, 720]
      }
    ]
  }
  chart.setOption(option)
}

// 初始化用户年龄分布图
const initUserAgeChart = () => {
  if (!userAgeChart.value) return
  
  const chart = echarts.init(userAgeChart.value)
  const option = {
    tooltip: {
      trigger: 'item'
    },
    series: [
      {
        name: '年龄分布',
        type: 'pie',
        radius: ['40%', '70%'],
        data: [
          { value: 2340, name: '18-25岁' },
          { value: 4580, name: '26-35岁' },
          { value: 3920, name: '36-45岁' },
          { value: 2650, name: '46-55岁' },
          { value: 1930, name: '55岁以上' }
        ]
      }
    ]
  }
  chart.setOption(option)
}

// 分页处理
const handleSizeChange = (size: number) => {
  pagination.size = size
  loadDetailData()
}

const handleCurrentChange = (page: number) => {
  pagination.page = page
  loadDetailData()
}

// 加载详细数据
const loadDetailData = () => {
  // 模拟API调用
  console.log('Loading detail data...', pagination)
}

onMounted(async () => {
  await nextTick()
  initUserTrendChart()
  initUserActivityChart()
  initUserRegionChart()
  initUserAgeChart()
})
</script>

<style lang="scss" scoped>
.user-statistics {
  .stats-cards {
    margin-bottom: 20px;
  }

  .charts-section {
    margin-bottom: 20px;
  }

  .detail-table {
    .el-pagination {
      margin-top: 20px;
      text-align: center;
    }
  }
}
</style>